import { mapState, mapActions } from 'vuex'

export default {
  data() {
    return {
      scrollTop: 0,
      displaybrand: false, //已选择车型是否显示判断
      lookmore: '查看更多',
      indexlist: ['A', 'B', 'C', 'D', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'O', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'],
      Brandlist: [],  // 车型品牌系列配置
      toView: '',
      liststr: [],
      checkedBrand: '',  // 选择的品牌
      pzxuanzebrand: '',
      //品牌样式
      headstyle: {
        margin: '0rpx 0rpx 0rpx 110rpx'
      },
      //系列
      XLheadstyle: {
        margin: '0rpx 0rpx 0rpx 90rpx'
      },
      ppSelectresult: '', //选择结果 品牌
      xlSelectresult: '', //选择结果 系列
      pzSelectresult: '', //选择结果 配置
      selectedList: [],  // 已选车型的列表
      toView: '',
      isCarTypeAll: false,  // 是否适用所有车型开关
      loading: false,
      // 中间变量，避免在watch中多次回调，造成无限循环
      controlStatus: false,
      parameter: [],
    }
  },

  computed: {
    // 车品牌列表
    ...mapState({
      carBrandList: state => state.carGoods.carBrandList,
    })
  },

  watch: {
    // 车品牌列表改变时，将最新值赋值给当前Brandlist变量
    carBrandList(v) {
      this.Brandlist = v
    }
  },

  onPageScroll(e) {
    this.scrollTop = e.scrollTop
  },

  onLoad() {

  },

  onBackPress(e) {
    // 如果是点击确认返回，就不需要清空
    if (e.from !== 'navigateBack') {
      this.resetEmpty()
    }
    return false
  },

  created() {
    let list = this.$store.state.carGoods.carTypeList.find(c => c.id === 123456789)
    if (list) {
      this.isCarTypeAll = true
    } else {
      this.selectedList = this.$store.state.carGoods.carTypeList
    }
    if (this.carBrandList.length === 0) {
      this.getCarTypeList()
      // this.setCarBrandList()
    } else {
      this.Brandlist = this.carBrandList
    }
  },

  methods: {
    // vuex的添加选择的车型列表方法
    ...mapActions([
      'setCarTypeList',
      'setCarBrandList'
    ]),

    // 获取车型列表
    async getCarTypeList() {
      const res = await this.$api.common.GetCarBrandList()
      // 在车型款式层添加checked字段
      this.Brandlist = res.data
      this.setCarBrandList(this.Brandlist)  // 储存到vuex-store里
      console.log(this.Brandlist)
    },

    // 获取车型配置列表
    async getCarConfigList(data) {
      const res = await this.$api.common.GetCarModelAndConfigList({
        Bid: data.bid
      })
      data.cartypeList = this.handleAddChecked(res.data.cartypeList)

      // 获取了品牌子列表，再次手动调取点击品牌事件
      this.selectCarLevel1(data)
    },

    // 给数组最底层的车款添加checked字段，用来判断是否勾选
    handleAddChecked(list) {
      let nlist = list
      // 在车型款式层添加checked字段
      nlist.forEach(item => {
        item.carList.forEach(c => {
          c.list.forEach(cItem => {
            cItem.checked = false
          })
        })
      })
      return nlist
    },

    // 查看更多
    lookmorclick() {
      this.displaybrand = !this.displaybrand
      if (!this.displaybrand) {
        this.lookmore = '查看更多'
      } else {
        this.lookmore = '点击收起'
      }
    },

    // 楼层定位
    bindToView(event) {
      var id = event.currentTarget.dataset.id
      console.log(id)
      this.toView = id
    },

    // 选择车型品牌 - 第1层
    selectCarLevel1(data) {
      console.log('车牌第1层', data)
      // 没有子列表，则需要请求子列表数据
      if (!data.cartypeList) {
        this.getCarConfigList(data)
      } else {
        // 有子列表数据，则展开子列表显示，并记录当前品牌的id，name
        if (this.checkedBrand === data.bid) {
          this.checkedBrand = ''
          return
        }
        this.checkedBrand = data.bid

        var pp = {
          'bid': data.bid,
          'name': data.brand
        }
        this.ppSelectresult = pp
      }
    },

    // 选择车型系列 - 第2层
    selectCarLevel2(data) {
      console.log('型号第2层', data)
      if (this.pzxuanzebrand === data.carTypeId) {
        this.pzxuanzebrand = ''
        return
      }
      this.pzxuanzebrand = data.carTypeId
      var xilie = {
        'cartypeid': data.carTypeId,
        'name': data.carTypeName
      }
      this.xlSelectresult = xilie
    },

    // 选择车型款式配置 - 第3层
    selectCarLevel3(car, pCar, ppCar) {
      if (this.selectedList.length < 50) {
        this.pzSelectresult = {
          id: car.id,
          name: ppCar.brand + pCar.carTypeName + car.name,
          // bName: ppCar.Brand,
          // cName: pCar.CarTypeName
        }
        car.checked = !car.checked
        // 勾选车款式，就将数据添加到已选列表前面
        // 取消勾选，就从已选列表查找当前车款的id，将其移除
        if (car.checked) {
          this.selectedList = [this.pzSelectresult].concat(this.selectedList)
        } else {
          let index = this.selectedList.findIndex(item => item.id === car.id)
          this.selectedList.splice(index, 1)
        }
      } else {
        uni.showToast({
          title: '最多选择50组',
          duration: 2000,
          icon: 'none'
        })
      }
    },

    //单条数据删除
    brandclickdelete(data, index) {
      this.selectedList.splice(index, 1)
      // 处理取消勾选，将列表里的checked勾选改为false
      this.Brandlist.forEach(item => {
        item.data.forEach(b => {
          // 循环含有子列表的数组
          if (b.cartypeList) {
            b.cartypeList.forEach(ct => {
              ct.carList.forEach(c => {
                c.list.forEach(cItem => {
                  if (cItem.id === data.id) {
                    cItem.checked = false
                  }
                })
              })
            })
          }
        })
      })
    },

    //清空
    resetEmpty() {
      this.selectedList = []
      // 将车型款式层的checked字段重置为false
      // 处理取消勾选，将列表里的checked勾选改为false
      let list = this.Brandlist
      list.forEach(item => {
        item.data.forEach(b => {
          // 循环品牌的子列表（如果含有）
          if (b.cartypeList) {
            b.cartypeList.forEach(ct => {
              ct.carList.forEach(c => {
                c.list.forEach(cItem => {
                  cItem.checked = false
                })
              })
            })
          }
        })
      })
      this.Brandlist = list
    },

    //适用所有车型
    setCarAllChange(status) {
      console.log('适用所有车型', status)
    },

    //取消按钮
    cancel() {
      this.resetEmpty()
      uni.navigateBack({
        delta: 1
      })
    },

    //确定按钮
    confirm() {
      // 储存选择的车型列表或所有车型开关到vuex-store里，回到上一页发布车品页面
      // 如果没有打开适用所有车型开关，则将选中的车型列表传回上一页面
      let arr = []
      if (this.isCarTypeAll) {
        arr.push({
          id: 123456789,
          name: '适用所有车型',
          // bName: '',
          // cName: ''
        })
      }
      let data = this.isCarTypeAll ? arr : this.selectedList
      this.setCarTypeList(data)
      uni.navigateBack({
        delta: 1
      })
    },
  }
}
